<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="shortcut icon"  th:href="@{/static/favicon.ico}"/>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script>
        var screenWidth = document.documentElement.clientWidth;
        layui.use(['table','jquery'], function(){
            var table = layui.table
                ,$ =layui.jquery
                ,upload = layui.upload;
            table.render({
                id:'tableAll'
                ,elem: '#test'//绑定表格
                //数据来源
                ,url:'/reimbursement/getMyApplications'//绑定数据来源
                ,toolbar: '#toolbarDemo'//绑定三个按钮
                ,title: '所有人报销申请表'
                ,page: true
                ,width:screenWidth
                ,cellMinWidth:60
                ,where : {
                    enable :'',
                    beginDate :'',
                    endDate:''
                }
                ,cols: [
                    [
                        {field:'time', title:'申请日期',  edit: 'text', sort: true,templet:'<div>{{ layui.util.toDateString(d.time, "yyyy-MM-dd") }}</div>'}
                        ,{field:'dictionaryReimbursementType', title:'报销类型',  sort: true,  templet: '<div>{{d.dictionary.value}}</div>'}
                        ,{field:'aircrafTicket', title:'报销金额（人民币：元）',minWidth:200}
                        ,{field:'enable', title:'报销进程',toolbar:'#reEnable'}
                        ,{field:'remark', title:'报销备注',minWidth:200}
                        ,{fixed: 'right', title:'操作',minWidth:200, toolbar: '#barDemo'}
                    ]
                ]
            });
            //已驳回
            $('#searchReject').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        enable:0,
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            //已通过
            $('#searchPass').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        enable:2,
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            //审核中
            $('#searchProcessing').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        enable:1,
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            //重置
            $('#reset').on('click', function() {
                table.reload('tableAll', {
                    where : {
                        enable :'',
                        beginDate :$("#begin-date").val(),
                        endDate : $("#end-date").val(),
                    },
                    page : {
                        curr : 1
                    }
                });
                return false;
            });
            function getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month
                    + seperator1 + strDate + " " + date.getHours() + seperator2
                    + date.getMinutes() + seperator2 + date.getSeconds();
                return currentdate;
            }

            //工具栏事件 识别lay event
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选')
                        break;
                };
            });
            //监听工具条 'tool(test)'要手动修改 tool是和  test是和table的lay-filter属性绑定
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'seeDetails'){
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    if(data.enable===0){

                        parent.layer.open({
                            title:'报销申请',
                            type:2,
                            content:'/reimbursement/reimbursementDetails?id='+data.id+'&typeId='+data.dictionary.id+'&enable='+data.enable,
                            area: ['1200px','600px'],
                            btn:['重新申请'],
                            yes:function(index, layero){
                                window.location.href = '/reimbursement/administrativeReimbursementApplication?dictionaryId='+data.dictionary.id+'&detailsId='+data.travelApplicationId+'&pastId='+data.id;
                            },
                            shade: [0.3, '#393D49'],
                            shadeClose:false,
                            moveOut:true,
                        })
                    }else{
                        parent.layer.open({
                            title: '报销申请',
                            type: 2,
                            content: '/reimbursement/reimbursementDetails?id=' + data.id + '&typeId=' + data.dictionary.id+'&enable='+data.enable,
                            area: ['1200px','600px'],
                            shade: [0.3, '#393D49'],
                            shadeClose:false,
                            moveOut:true,
                        });
                    }
                }else if(obj.event==='administrativeReimbursementApplication'){
                    window.location.href = '/reimbursement/administrativeReimbursementApplication?dictionaryId='+data.dictionary.id+'&detailsId='+data.travelApplicationId+'&pastId='+data.id;
                }
            });

        });
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="seeDetails">查看详情</a>
        {{# if(d.enable === 0){ }}
         <a class="layui-btn layui-btn-xs" lay-event="administrativeReimbursementApplication">重新申请</a>
        {{# } }}
    </script>

    <script type="text/html" id="reEnable">
        {{# if(d.enable === 0){ }}
            <div>驳回</div>
        {{# } }}

        {{# if(d.enable === 1){ }}
        <div>审核中</div>
        {{# } }}

        {{# if(d.enable === 2){ }}
        <div>通过</div>
        {{# } }}

        {{# if(d.enable === 3){ }}
        <div>已重新申请</div>
        {{# } }}

    </script>

</head>
<body>
<form>
<button class="layui-btn" id="searchReject">已驳回</button>
<button class="layui-btn" id="searchPass">已通过</button>
<button class="layui-btn" id="searchProcessing">审核中</button>
<button class="layui-btn" id="reset">重置</button>
    申请时间:
    <div class="layui-input-inline">
        <input type="text" th:autocomplete="off"  name="beginDate" id="begin-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
    </div> ——
    <div class="layui-input-inline">
        <input type="text" th:autocomplete="off"  name="endDate" id="end-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
    </div>
    <button class="layui-btn" id="searchTime">查询</button>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>
</body>
</html>